<template>
  <div>
    <el-form
      :model="cronValidateForm"
      ref="cronValidateForm"
      class="text-center"
      label-width="200px"
    >
      <el-form-item label="类型：">
        <el-select
          v-model="type"
          placeholder="请选择类型"
          style="width: 112px"
          @change="typeChange"
        >
          <el-option label="每天" value="每天"></el-option>
          <el-option label="每周" value="每周"></el-option>
          <el-option label="每月" value="每月"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="星期：">
        <el-select
          v-show="type == '每周'"
          v-model="week"
          value-key="cron"
          placeholder="请选择星期"
          style="width: 112px"
        >
          <el-option
            v-for="item in weekOption"
            :key="item.cron"
            :label="item.title"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="日期：">
        <el-select
          v-show="type == '每月'"
          v-model="month"
          value-key="cron"
          placeholder="请选择日期"
          style="width: 112px"
        >
          <el-option
            v-for="item in monthOption"
            :key="item.cron"
            :label="item.title"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '时间不能为空' }]"
        prop="time"
        label="时间:"
      >
        <el-time-picker
          placeholder="选择时间"
          v-model="cronValidateForm.time"
          value-format="H:m:s"
        ></el-time-picker>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label-width="0" align="center" style="display: contents">
        <el-button @click="cancel('cronValidateForm')">取消</el-button>

        <!-- Add margin here -->
        <el-button type="primary" @click="handleSummit('cronValidateForm')"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "CornView",
  props: {
    timeCronStr: {
      type: String,
      required: true,
      defalut: "999",
    },
  },
  data() {
    return {
      timeValid: true, // 新增 timeValid 属性
      visible: false,
      value: "",
      type: "每天", // 天\周\月
      week: null, // 星期几
      month: null, // 几号
      cronValidateForm: {
        time: "",
      },
      weekOption: [
        {
          title: "星期一",
          value: "星期一",
          cron: 2,
        },
        {
          title: "星期二",
          value: "星期二",
          cron: 3,
        },
        {
          title: "星期三",
          value: "星期三",
          cron: 4,
        },
        {
          title: "星期四",
          value: "星期四",
          cron: 5,
        },
        {
          title: "星期五",
          value: "星期五",
          cron: 6,
        },
        {
          title: "星期六",
          value: "星期六",
          cron: 7,
        },
        {
          title: "星期日",
          value: "星期日",
          cron: 1,
        },
      ],
      monthOption: [],
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      //debugger;
      let arr = [];
      for (let i = 1; i < 32; i++) {
        arr.push({
          title: i + "号",
          value: i + "号",
          cron: i,
        });
      }
      this.monthOption = arr;
      if (this.timeCronStr) {
        //debugger;
        this.value = this.timeCronStr;
        let valueArr = this.timeCronStr.split(",");
        let valueArrLen = valueArr.length;
        this.type = valueArr[0];
        this.cronValidateForm.time = valueArr[valueArrLen - 1];
        if (valueArrLen > 2) {
          // 说明是每月 或 每周
          if (valueArr[1].indexOf("星期") > -1) {
            // 每周
            this.weekOption.map((v) => {
              if (v.title == valueArr[1]) {
                this.week = v;
              }
            });
          } else {
            this.monthOption.map((v) => {
              if (v.title == valueArr[1]) {
                this.month = v;
              }
            });
          }
        }
      }
    },
    typeChange(t) {
      if (t == "每周" && !this.week) {
        this.week = this.weekOption[0];
      }
      if (t == "每月" && !this.month) {
        this.month = this.monthOption[0];
      }
    },
    handleSummit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let dataArr = [];
          let timeCron;
          let clockCornArr = this.cronValidateForm.time.split(":").reverse();
          if (this.type == "每天") {
            dataArr.push(this.type, this.cronValidateForm.time);
            timeCron = clockCornArr.join(" ") + " * * ?";
          } else {
            if (this.type == "每月") {
              dataArr.push(
                this.type,
                this.month.title,
                this.cronValidateForm.time
              );
              timeCron =
                clockCornArr.join(" ") + " " + this.month.cron + " * ?";
            } else {
              // 每周
              dataArr.push(
                this.type,
                this.week.title,
                this.cronValidateForm.time
              );
              timeCron = clockCornArr.join(" ") + " ? * " + this.week.cron;
            }
          }
          this.value = dataArr.join(",");
          // console.log('timeCron', timeCron)
          this.visible = false;
          this.$emit("change", this.value, timeCron); // 每月,1号,14:52:36 和 36 52 14 1 * ?
        }
      });
    },
    cancel(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
